<script setup lang="ts">
import { ref, onMounted } from 'vue';
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import mainContent from './components/main.vue';
const mainContentObj = ref<any>(null)

const showCommonConfig = () => {
  mainContentObj.value.showDrawer();
}
</script>

<template>
  <div class="dms-tool-enter">
    <a href="javascript:void(0)" class="dms-tool-btn" @click="showCommonConfig">
      <!-- <svg t="1693276984162" class="dms-tool-img" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1484" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M732.16 450.048h-12.288V377.856c0-37.888-31.744-69.12-70.656-69.12h-73.216c1.024-7.168 1.024-14.848 1.024-22.016 0-75.776-62.976-137.728-140.288-137.728S296.448 210.944 296.448 286.72c0 7.168 0 14.848 1.024 22.016H224.256c-38.912 0-70.656 31.232-70.656 69.12v102.4c0 9.216 3.584 15.872 10.752 21.504 7.168 5.632 14.848 7.168 23.552 5.632 7.68-1.536 16.384-3.072 22.528-3.072 46.08 0 84.992 38.4 84.992 83.456 0 46.08-37.888 83.456-84.992 83.456-6.656 0-14.848-1.536-22.528-3.072-7.68-2.048-16.896 0.512-23.552 5.632-7.168 5.12-10.752 12.288-10.752 21.504v102.4c0 37.888 31.744 69.12 70.656 69.12H650.24c19.456 0 38.4-8.192 51.712-22.016 12.288-13.312 18.432-29.696 17.92-47.104v-72.192h12.288c77.312 0 140.288-61.952 140.288-137.728 0-75.776-62.976-137.728-140.288-137.728z m-66.048 239.616v105.984c0 8.192-7.168 15.36-15.872 15.36H224.768c-8.704 0-15.872-6.656-15.872-15.36v-70.656c0.512 0 1.536 0 2.048-0.512 77.312-0.512 139.776-61.952 139.776-137.728 0-37.376-14.848-72.704-41.984-98.816-27.136-26.112-62.976-39.936-100.352-38.912V378.368c0-8.192 7.168-15.36 15.872-15.36h110.08c8.704 0 17.92-4.608 23.552-12.288 4.608-6.656 5.632-15.36 2.048-25.088-5.12-11.264-8.192-24.064-8.192-36.352 0-46.08 37.888-83.456 84.992-83.456 46.08 0 84.992 38.4 84.992 83.456 0 10.752-1.024 23.04-7.68 35.84-4.608 7.68-3.584 18.432 1.536 25.6 5.12 6.144 13.824 12.288 23.552 12.288H650.24c8.704 0 15.872 6.656 15.872 15.36v107.52c0 9.216 3.584 15.872 10.752 21.504 7.68 5.632 16.896 6.656 25.6 3.072 8.192-4.096 17.408-6.144 28.672-6.144 46.08 0 84.992 38.4 84.992 83.456 0 46.08-37.888 83.456-84.992 83.456-8.192 0-17.408-3.072-26.112-5.632l-3.072-1.024c-10.24-2.56-18.432-1.536-25.088 3.584-6.656 3.072-10.752 11.264-10.752 21.504z" p-id="1485" fill="currentColor"></path></svg> -->
      <svg t="1693304833782" class="dms-tool-img" viewBox="0 0 1039 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2172" width="200" height="200"><path d="M1023.620628 580.267859a508.903792 508.903792 0 0 1-31.147327 124.462239 64.041825 64.041825 0 0 1-58.641473 40.788543l-73.111241 1.223021a409.060807 409.060807 0 0 1-55.433028 67.012019l14.565068 68.775076a64.057709 64.057709 0 0 1-28.065949 67.20262 510.174463 510.174463 0 0 1-118.998352 56.243081 64.137126 64.137126 0 0 1-68.965676-20.108371l-46.665398-56.258964a413.682873 413.682873 0 0 1-82.736574 0l-46.617748 56.258964a64.105359 64.105359 0 0 1-68.997443 20.108371 510.237996 510.237996 0 0 1-118.998352-56.243081 64.105359 64.105359 0 0 1-28.081832-67.218504l14.580951-68.759192a409.060807 409.060807 0 0 1-55.433028-67.012019l-73.111241-1.223021a64.105359 64.105359 0 0 1-58.67324-40.804427 511.079816 511.079816 0 0 1-31.11556-124.446355 64.121242 64.121242 0 0 1 34.991107-64.915411l61.246349-30.591408c2.827243-32.656248 9.51415-64.645394 20.044837-95.633887L79.480204 331.343383a64.057709 64.057709 0 0 1-4.558533-71.761153 513.557625 513.557625 0 0 1 74.79488-97.794027 64.168893 64.168893 0 0 1 72.587089-13.453231l64.565977 29.638405a416.065381 416.065381 0 0 1 96.412173-47.18955l17.630562-71.395835A64.057709 64.057709 0 0 1 455.630628 11.086606c20.410155-2.382508 40.661476-3.605529 60.182162-3.60553 19.504802 0 39.74024 1.223021 60.150395 3.60553a64.057709 64.057709 0 0 1 54.718276 48.301386l17.630562 71.395835a416.684834 416.684834 0 0 1 96.412173 47.18955l64.550094-29.638405a64.168893 64.168893 0 0 1 72.602972 13.453231 513.605275 513.605275 0 0 1 74.79488 97.794027 64.105359 64.105359 0 0 1-4.558533 71.777037l-44.775274 57.767886a404.311673 404.311673 0 0 1 20.044837 95.633887l61.230466 30.591408a64.105359 64.105359 0 0 1 35.00699 64.915411zM653.140573 944.982243a444.607832 444.607832 0 0 0 104.020317-49.174973l-13.056146-61.595783a385.489857 385.489857 0 0 1-131.49858 61.897568l40.534409 48.873188z m-274.67145 0l40.327925-48.650821a387.37998 387.37998 0 0 1-131.371512-61.945218l-12.992613 61.421066a445.402001 445.402001 0 0 0 104.0362 49.174973zM127.320972 544.847901l-55.718929 27.843582a444.639599 444.639599 0 0 0 27.208246 108.769449l63.50179 1.048304a389.540121 389.540121 0 0 1-34.991107-137.661335z m68.250924-338.284424a448.86458 448.86458 0 0 0-65.455447 85.563818l38.739586 49.969143a392.335598 392.335598 0 0 1 83.22896-109.563619l-56.513099-25.969342z m372.910213-131.832131a450.262318 450.262318 0 0 0-52.669319-3.176677c-17.837046 0-35.435841 1.143604-52.701086 3.176677l-15.057453 60.976332a416.557766 416.557766 0 0 1 24.079218-3.573763 387.761182 387.761182 0 0 1 111.374326 3.462579l-15.025686-60.865148z m267.539808 131.832131l-98.778798 45.36296a348.656277 348.656277 0 0 0-142.23575-69.743962l-0.174718-0.714753a344.876031 344.876031 0 0 0-158.103256 0.111184l-0.142951 0.603569a347.925641 347.925641 0 0 0-122.730948 55.051827c-2.509576 1.794823-5.019151 3.573763-7.512844 5.432119-0.555919 0.444735-1.111837 0.88947-1.699522 1.318321a349.879298 349.879298 0 0 0-59.896261 58.975025 344.415412 344.415412 0 0 0-73.413025 254.960164 344.463063 344.463063 0 0 0 128.369552 232.183384 344.463063 344.463063 0 0 0 254.976047 73.397142c189.917685-21.426692 327.007218-193.412031 305.564643-383.3456a344.669547 344.669547 0 0 0-47.078366-139.535575 21.331392 21.331392 0 1 1 36.595329-21.98261c4.622066 7.703444 8.878815 15.581605 12.913195 23.523299l38.80312-50.032676a448.86458 448.86458 0 0 0-65.455447-85.563818z m68.18739 338.252658a386.29991 386.29991 0 0 1-35.14994 137.693101l63.724157-1.048304a444.639599 444.639599 0 0 0 27.208246-108.769449l-55.782463-27.875348zM515.81279 815.929706c-47.4278 0-92.727226-10.832471-134.611724-32.163864a21.379042 21.379042 0 0 1 19.425385-38.072484 251.116384 251.116384 0 0 0 115.186339 27.525914c140.12326 0 254.134228-114.042735 254.134228-254.181878 0-61.770501-22.395579-121.28556-63.072939-167.617407a21.363159 21.363159 0 1 1 32.116213-28.177132 296.542877 296.542877 0 0 1 73.66716 195.794539c0 163.710093-133.166335 296.892312-296.844662 296.892312z m0-92.69546c-112.61323 0-204.196852-91.599506-204.196852-204.180969s91.583622-204.196852 204.196852-204.196852c112.581463 0 204.149202 91.615389 204.149202 204.196852s-91.567739 204.180969-204.149202 204.180969z m0-344.304229c-77.272689 0-140.12326 62.850571-140.12326 140.12326 0 77.256805 62.850571 140.107377 140.12326 140.107377 77.240922 0 140.091493-62.850571 140.091493-140.107377 0-77.272689-62.850571-140.12326-140.091493-140.12326z m79.321646-101.447207a254.547196 254.547196 0 0 0-79.321646-12.595527c-140.155027 0-254.165995 113.995085-254.165995 254.150111 0 58.180855 19.107717 112.899131 55.242428 158.26209a21.363159 21.363159 0 0 1-16.677559 34.657556c-6.273939 0-12.500227-2.747826-16.725209-8.052879a297.686481 297.686481 0 0 1-64.550094-184.866767c0-163.69421 133.166335-296.876428 296.876429-296.876429 31.607945 0 62.787038 4.955617 92.631926 14.723902 11.197789 3.669063 17.312894 15.740439 13.612065 26.938228a21.315508 21.315508 0 0 1-26.922345 13.659715z" fill="currentColor" p-id="2173"></path></svg>
    </a>
    <main-content ref="mainContentObj" />
  </div>
</template>

<style scoped>
.dms-tool-enter{
  position: fixed;
  bottom: 10px;
  right: -25px;
  width: 50px;
  height: 50px;
  z-index: 9999;
  transform: translateX(0);
  transition: transform .4s;
}
.dms-tool-btn{
  width: 100%;
  height: 100%;
  display: flex;
  background-color: rgba(0,0,0,0.6);
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  overflow: hidden;
  color: black;
  transform: rotateZ(0);
  transition: transform .4s;
}
.dms-tool-enter:hover{
  transform: translateX(-35px);
}
.dms-tool-enter:hover .dms-tool-btn{
  transform: rotateZ(90deg);
}
.dms-tool-img{
  width: 80%;
  height: 80%;
}
</style>
